Skip to main content

Frontend Code - JSON Overview

Getting Started with JSON​

In the activity designer, the JSON tab is where you can write the custom activity's frontend code, which is how the UI box of each custom activity is created.

The JSON of the Activity Designer includes:

  1. General properties (begins with the "data" property):
  • name: activity's name (eg., "name":"Add Spaces")
  • description: A brief description of the activity. (e.g., "description": "Add a space between chars").
  • timeout: The activity's timeout period (e.g., "Timeout": "00:01:00")
  • activitySettings: An array of control objects representing the activity's configurable settings (e.g., "activitySettings": [])
  1. Control Properties (under "activitySettings"): Each control has mandatory and optional properties, with some controls featuring unique properties specific to their functionality.

Guides​

To walk through guided examples of building the frontend of your own activities with JSON, visit our Guides:

Mandatory Control Properties​

The JSON code requires several mandatory properties. The table below lists the mandatory properties along with their uses.

View table here.

Optional Control Properties​

In addition to mandatory properties, there are optional properties you can use to develop activities. The table below lists the optional properties along with their uses.

View table here.

Special Properties for Control Types​

The "controlType" property options each have their own properties.

View table here.

"valueChangesActions" Property​

When using the controls "dropdown", "checkbox", and "radiobutton", you may include a "valueChangesActions" property in it.

The "valueChangesActions" property supports three actions:

  1. Enable
  2. Disable
  3. Set Value

For example, if you add a Date Difference as a checkbox control, you can add the "valueChangesActions" property.

False Setting​

If the "valueChangesActions" property is false:

  • the controls "FirstDateFormat" and "FirstDate" will be enabled.

True Setting​

If the "valueChangesActions" property is true:

  • "disable" will disable the controls "FirstDateFormat" and "FirstDate" (disable and enable actions receive an array of strings - control keys)
  • "setValue" will set their values to be empty strings ("").